<template>
  <section class='f-change-pwd'>
    <van-form @submit="onSubmit" input-align="right" error-message-align="right">
      <van-cell-group>
        <van-field v-model="userInfo.account" name="account" label="当前号码" placeholder="请输入当前号码" readonly
          :rules="[{ required: true, message: '请填写当前号码' }]" />

        <van-field v-model="form.currentPassword" name="currentPassword" label="原密码" placeholder="请输入原密码"
          :type="form.showCurrentPassword?'':'password'"
          :rules="[{ required: true, message: '请填写原密码' },{ validator: validatorPassword, message: '密码错误' }]">
          <template #right-icon>
            <van-icon v-show="!form.showCurrentPassword" name="closed-eye" @click="form.showCurrentPassword = true" />
            <van-icon v-show="form.showCurrentPassword" name="eye-o" @click="form.showCurrentPassword = false" />
          </template>
        </van-field>

        <van-field v-model="form.resetPassword" name="resetPassword" label="新密码" placeholder="请输入新密码"
          :type="form.showResetPassword?'':'password'"
          :rules="[{ required: true, message: '请填写新密码' },{ validator: validatorPasswordNew, message: resetPasswordMsg }]">
          <template #right-icon>
            <van-icon v-show="!form.showResetPassword" name="closed-eye" @click="form.showResetPassword = true" />
            <van-icon v-show="form.showResetPassword" name="eye-o" @click="form.showResetPassword = false" />
          </template>
        </van-field>

        <van-field v-model="form.confirmPassword" name="confirmPassword" label="确认密码" placeholder="请输入确认密码"
          :type="form.showConfirmPassword?'':'password'"
          :rules="[{ required: true, message: '请填写确认密码' },{ validator: validatorPasswordNew1, message: '两次密码不一致' }]">
          <template #right-icon>
            <van-icon v-show="!form.showConfirmPassword" name="closed-eye" @click="form.showConfirmPassword = true" />
            <van-icon v-show="form.showConfirmPassword" name="eye-o" @click="form.showConfirmPassword = false" />
          </template>
        </van-field>

      </van-cell-group>
      <div class="f-submit-btn">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import hexMD5 from "@/utils/md5.min.js"
import { showDialog } from 'vant';
import { getStore, phoneFormat } from '@/utils/utils';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      flag: false,
      userInfo: {},
      form: {
        "confirmPassword": "",
        "currentPassword": "",
        "resetPassword": ""
      },
      passwordMsg: ''
    })

    onMounted(() => {
      state.flag = route.query.flag
      store.commit("setNavBar", {
        title: '修改登录密码',
        show: true,
        left: !state.flag,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      state.userInfo = getStore('USER_INFO')
      state.userInfo.account = phoneFormat(state.userInfo.account)
    })

    const validatorPassword = (val) =>
      new Promise((resolve) => {
        let json = {
          password: hexMD5(val)
        }
        api.confirmPassword(json).then(res => {
          resolve(true)
        }).catch(err => {
          resolve(false)
        })
      });

    const validatorPasswordNew = (val) =>
      new Promise((resolve) => {
        const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
        if (reg.test(val)) {
          resolve(true)
        } else {
          state.passwordMsg = '密码长度8位以上,由大写字母、小写字母、数字、特殊符号中两种以上方式组成'
          resolve(false)
        }
      });

    const resetPasswordMsg = (value, rule) => {
      return state.passwordMsg
    }

    const validatorPasswordNew1 = (val) =>
      new Promise((resolve) => {
        if (state.form.resetPassword === val) {
          resolve(true)
        } else {
          resolve(false)
        }
      });

    const onSubmit = () => {
      let data = JSON.parse(JSON.stringify(state.form))
      let json = {
        "confirmPassword": hexMD5(data.confirmPassword),
        "currentPassword": hexMD5(data.currentPassword),
        "resetPassword": hexMD5(data.resetPassword)
      }
      api.updatePwd(json).then(res => {
        showDialog({
          title: '提示',
          message: '修改密码成功，请重新登录！',
        }).then(() => {
          router.replace('/')
        });
      })
    }

    return {
      ...toRefs(state),
      onSubmit,
      validatorPassword,
      resetPasswordMsg,
      validatorPasswordNew,
      validatorPasswordNew1
    }
  }
}
</script>
<style lang='scss' scoped>
.f-change-pwd {
  .f-submit-btn {
    margin-top: 70px;
    padding: 0 62px;
  }
}
</style>